<template>
  <div>
    <MyHeader :addTodoList="addTodoList" />
    <MyTodos :todoList="todoList" :deleteTodoList="deleteTodoList" />
    <MyFooter 
      :todoList="todoList" 
      :deleteFinishedTodoList="deleteFinishedTodoList"
      :selectTodos="selectTodos" />
  </div>
</template>

<script>
import MyHeader from "./myHeader.vue";
import MyTodos from "./myTodos.vue";
import MyFooter from "./myFooter.vue";

export default {
  name: "MyTodoList",
  components: {
    MyHeader,
    MyTodos,
    MyFooter,
  },
  data() {
    return {
      todoList: JSON.parse(localStorage.getItem("todoList")) || []
    };
  },
  methods: {
      // 添加待做事件
      addTodoList(todo) {
          this.todoList.unshift(todo);
      },
      // 删除莫个事件
      deleteTodoList(id) {
          this.todoList = this.todoList.filter(todo => todo.id != id);
      },
      // 删除全部已完成的事件
      deleteFinishedTodoList() {
          this.todoList = this.todoList.filter(todo => todo.done == false);
      },
      // 全选/全不选
      selectTodos(done) {
          this.todoList.forEach(todo => {
              todo.done = done;
          });
      }
  },
  watch: {
    todoList: {
      deep: true,
      handler(newValue) {
        localStorage.setItem("todoList", JSON.stringify(newValue));
      }
    }
  }
};
</script>

<style>
</style>